/* eslint-disable multiline-ternary */
import InputPasswordToggle from '@components/input-password-toggle'
import themeConfig from '@configs/themeConfig'
import { useSkin } from '@hooks/useSkin'
import '@styles/react/pages/page-authentication.scss'
import { isObjEmpty } from '@utils'
import classNames from 'classnames'
import { Form, FormikProvider, useFormik } from 'formik'
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import {
  Button,
  CardText,
  CardTitle,
  Col,
  FormFeedback,
  Label,
  Row,
  Spinner
} from 'reactstrap'
import validator from 'validator'
import * as Yup from 'yup'
import { ResetPasswordAction } from '../../../redux/authentication/authAction'

const ResetPassword = () => {
  const { skin } = useSkin()
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const { search } = useLocation()
  const { resetPasswordLoading } = useSelector((state) => state.auth)
  const obj = search.split('token=')[1] ?? ''
  const token = obj

  const illustration =
      skin === 'dark'
        ? 'forgot-password-v2-dark.svg'
        : 'forgot-password-v2.svg',
    source = require(`@src/assets/images/pages/${illustration}`)

  const ResetPasswordSchema = Yup.object().shape({
    newPassword: Yup.string()
      .required('Password ia a required')
      .test(
        'strong-password',
        'Password must contain at least 8 characters, one number, one uppercase letter and one lowercase letter',
        (value) => {
          if (!value) {
            return true
          }
          return validator.isStrongPassword(value, {
            minLength: 8,
            minLowercase: 1,
            minNumbers: 1,
            minUppercase: 1,
            minSymbols: 0
          })
        }
      ),
    confirmPassword: Yup.string()
      .required('Password ia a required')
      .oneOf([Yup.ref('newPassword'), null], 'Passwords do not match!')
  })

  // formik hook
  const formik = useFormik({
    initialValues: {
      newPassword: ''
    },
    validationSchema: ResetPasswordSchema,
    onSubmit: (values) => {
      if (isObjEmpty(formik.errors)) {
        const { newPassword } = values
        const data = {
          token,
          password: newPassword.trim()
        }
        dispatch(
          ResetPasswordAction({ data, callback: () => navigate('/login') })
        )
      }
    }
  })

  return (
    <div className="auth-wrapper auth-cover">
      <Row className="auth-inner m-0">
        <Link
          className="brand-logo d-flex align-items-center "
          to="/"
          onClick={(e) => e.preventDefault()}
        >
          {skin === 'dark' ? (
            <img
              src={themeConfig.app.appLogoImage}
              alt="logo-dark"
              height={35}
              width={35}
            />
          ) : (
            <img
              src={themeConfig.app.appLogoImage}
              alt="logo-dark"
              height={35}
              width={35}
            />
          )}
          <h2 className="ms-1 mb-0">ethera</h2>
        </Link>
        <Col
          className=" d-lg-flex align-items-center p-5 d-sm-none d-xs-none d-md-none"
          lg="8"
          sm="12"
        >
          <div className="w-100 d-lg-flex align-items-center justify-content-center px-5">
            <img className="img-fluid" src={source} alt="Login Cover" />
          </div>
        </Col>

        <Col
          className="d-flex align-items-center auth-bg  px-2 p-lg-5"
          lg="4"
          sm="12"
        >
          <Col className="px-xl-2 mx-auto" sm="8" md="6" lg="12">
            <CardTitle tag="h2" className="fw-bold mb-1 pl-1">
              Create New Password 🔒
            </CardTitle>
            <CardText className="mb-2 pl-1">Enter your New Password</CardText>
            <FormikProvider value={formik}>
              <Form
                className="auth-forgot-password-form mt-2"
                onSubmit={formik.handleSubmit}
              >
                <div className="mb-1 inputs-styling">
                  <Label
                    className="form-label px-1"
                    htmlFor="register-password"
                  >
                    New Password
                  </Label>
                  <InputPasswordToggle
                    id="newPassword"
                    name="newPassword"
                    {...formik.getFieldProps('newPassword')}
                    className={classNames({
                      'input-group-merge': true,
                      'is-invalid':
                        formik.touched.newPassword && formik.errors.newPassword
                    })}
                  />
                  {formik.touched.newPassword && formik.errors.newPassword && (
                    <FormFeedback className="px-1">
                      {formik.errors.newPassword}
                    </FormFeedback>
                  )}
                </div>
                <div className="mb-1 inputs-styling">
                  <Label
                    className="form-label px-1"
                    htmlFor="register-password"
                  >
                    Confirm New Password
                  </Label>
                  <InputPasswordToggle
                    id="confirmPassword"
                    name="confirmPassword"
                    {...formik.getFieldProps('confirmPassword')}
                    className={classNames({
                      'input-group-merge': true,
                      'is-invalid':
                        formik.touched.confirmPassword &&
                        formik.errors.confirmPassword
                    })}
                  />
                  {formik.touched.confirmPassword &&
                    formik.errors.confirmPassword && (
                      <FormFeedback className="px-1">
                        {formik.errors.confirmPassword}
                      </FormFeedback>
                    )}
                </div>
                <Button
                  block
                  color="primary"
                  className="button-primary my-2"
                  onClick={formik.submitForm}
                  disabled={resetPasswordLoading}
                >
                  {resetPasswordLoading && (
                    <Spinner size="sm" className="mx-1 spinner-size-same" />
                  )}
                  Save
                </Button>
              </Form>
            </FormikProvider>
            {/* <p className="text-center mt-2">
              <Link to="/login">
                <ChevronLeft className="rotate-rtl me-25" size={14} />
                <span className="align-middle">Back to login</span>
              </Link>
            </p> */}
          </Col>
        </Col>
      </Row>
    </div>
  )
}

export default ResetPassword
